<template>
	<view class="countdown" :style="{'font-size':fontSize}">
		<image src="../../static/img/time.png"></image>
		<!-- <view class="Plantime">距优惠结束:</view> -->
		<view class="day" v-if="d!=0"><text selectable="true"  class="text">{{d}}</text>天</view> 
		<view class="Plantime" >{{h<10?'0'+h:h}}时</view>
		<!-- <text selectable="true"  class="text">:</text> -->
		<view class="Plantime">{{m<10?'0'+m:m}}分</view>
		<!-- <text selectable="true"  class="text">:</text> -->
		<view class="Plantime">{{s<10?'0'+s:s}}秒</view>
	</view>
</template>

<script>
	export default{
		props:{
			startTime:'',
			endTime:'',
			fontSize:'',
		},
		data(){
			return{
				timer:null,
				d:0,
				h:0,
				m:0,
				s:0
			}
		},
		mounted() {
			this.time()
		},
		beforeDestroy(){
			clearInterval(this.timer);
			this.timer = null;
		},
		computed:{
			sTime(){return this.startTime},
			eTime(){return this.endTime}
		},
		watch:{
			endTime(){
				clearInterval(this.timer);
				this.time()
			}
		},
		methods:{ 
			time(){
				let leftTime = this.GetDateDiff(this.sTime,this.eTime)
				
				this.getCountdownTime(leftTime)
			},
			 timestampToTime(timestamp) {
			  // 时间戳为10位需*1000，时间戳为13位不需乘1000
			  var date = new Date(timestamp * 1000);
			  var Y = date.getFullYear() + "-";
			  var M =
			    (date.getMonth() + 1 < 10
			      ? "0" + (date.getMonth() + 1)
			      : date.getMonth() + 1) + "-";
			  var D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
			  var h = date.getHours() + ":";
			  var m = date.getMinutes() + ":";
			  var s = date.getSeconds();
			  return Y + M + D + h + m + s;
			},
			//计算两个时间差
			GetDateDiff(startTime, endTime) {
				let startTime_tmp = this.timestampToTime(startTime)
				let endTime_tmp   = this.timestampToTime(endTime)
			    //将xxxx-xx-xx的时间格式，转换为 xxxx/xx/xx的格式
			    startTime_tmp = startTime_tmp.replace(/\-/g, "/");
			    endTime_tmp = endTime_tmp.replace(/\-/g, "/");
			    //将计算间隔类性字符转换为小写
				
			    var sTime = new Date(startTime_tmp); 
			    var eTime = new Date(endTime_tmp); 
			    return parseFloat((eTime.getTime() - sTime.getTime()) / 1000);
			},
			//计算活动结束时间
			getCountdownTime(leftTime){
				let time = leftTime
				if (time>0) {
					this.timer = setInterval(() => {
						if(time == 0){
							clearInterval(this.timer)
							this.h = 0
							this.m = 0
							this.s = 0
						}else{
							this.d = parseInt(leftTime/3600/24);
							this.h = parseInt((time/3600)%24);
							this.m = parseInt((time/60)%60);
							this.s = parseInt(time%60);
							time --
						}
					},1000)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.countdown{
		// padding: 5px 0px;
		display: flex;
		align-items: center;
		// font-size: 16rpx;//12px;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		color: #f00;
		image{
			width: 15px;
			height: 15px;
		}
		.day{
			// font-size: 14px;
			// color: #606060;
			display: flex;
			align-items: center;
			.text{
				color: #FD3C22;
				// font-size: 14px;
				font-weight: bold;
			}
		}
		.Plantime{
			// padding: 8rpx;
			// background-color: #606060;
			// border-radius: 4rpx;
			box-sizing: border-box;
		}
		.text{
			// font-size: 14px;
			font-weight: bolder;
			// margin: 0 6rpx;color: #606060;
		}
	}
</style>
